<template>
  <div style="display: flex; justify-content: center; height: 40vh; width: 100vw; align-content: center">
    <el-card class="box-card" style="height: 400px; width: 90vw; margin-top: 20px">
        <div slot="header" class="clearfix">
            <span style="font-weight: bold">用户信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="logout">退出</el-button>
        </div>
        <div style="display: flex; flex-direction: row; width: 100%; margin-bottom: 10px">
            <div class="name">root</div>
        </div>
        <el-divider></el-divider>
        <div style="display: flex; flex-direction: row; width: 100%">
            <div class="form-line" style="font-weight: bold; padding-right:50px">权限：</div>
            <div class="form-line">root</div>
        </div>
    </el-card>
    
  </div>

</template>

<script>
import { getToken, removeToken, removePerm } from '@/request/token'

export default {
  data() {
    return {
      loading: false,
      postForm: {
        name: 'root',
        password: 'root311'
      },
      loginRules: {
        name: [{ required: true, trigger: 'blur', message: '用户名不能为空' }], 
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
      }
    }
  },

  methods: {
    logout() {
        removeToken(); removePerm()
        this.$router.push({ name: 'Login' })
    }
  }
}
</script>

<style>
.name{
    font-size: 40px;
    font-weight: bolder;
}
.form-line {
    height: 20px;
    font-size: 20px;
    line-height: 20px;
}
</style>